

<template>
<div>
  <h2>Father</h2>

<div>
  接收1的消息: {{  m1 }} <br>
  接收2的消息: {{  m2 }} <br>
</div>
  <br>
  <hr>
  <br>

  <Child1/>
  <br>
  <hr>
  <br>


  <Child2/>
</div>
</template>
<script setup lang="ts">

import Child1 from '@views/communication/03_mitt/Child1.vue'
import Child2 from '@views/communication/03_mitt/Child2.vue'
import emitter from '@utils/emitter.ts'

const m1 = ref('')
const m2 = ref('')
onMounted(()=>{
  emitter.on('child1Msg',(val:string)=>{
    console.log('接收子组件1的消息：',val)
    m1.value = val
  })

  emitter.on('child2Msg', (val:string)=>{
    console.log('接收子组件2的消息：',val)
    m2.value = val
  })
})
</script>
<style scoped>

</style>
